<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>柚子的游戏</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <script type="text/javascript">
          (function() {
              var scale = 1.0;
              var ratio = 1;
              var userAgent = navigator.userAgent;
              var match = userAgent.match(/Android/);
              var iosLt5 = navigator.userAgent.match(/iphone4|iphone5/i);
              if (!!match || !!iosLt5) {
                  document.write('<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">');
                  document.documentElement.style.fontSize = "50px";
              } else {
                  if (window.devicePixelRatio >= 2) {
                      scale *= 0.5;
                      ratio *= 2;
                      var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
                      document.write(text);
                      document.documentElement.style.fontSize = 50 * ratio + "px";
                   }
              }
          })();
        </script>
    <style>
        /**重置标签默认样式*/
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑'
        }
        #container {
            /*width: 450px;
            height: 780px;*/
            background: #eee;
            /*margin: 80px auto 0;*/
            position: relative;
            box-shadow: 20px 20px 55px #777;
            height: 100%;
        }
        .header {
            background: #000;
            height: .8rem;
            color: #fff;
            line-height: .7rem;
            font-size: .4rem;
            padding: 0 .2rem;
        }
        .footer {
            /*width: 430px;*/
            width: 100%;
            height: 1rem;
            background: #666;
            position: absolute;
            bottom: 0;
            /*padding: .2rem;*/
        }
        .footer input {
            width: 70%;
    height: .9rem;
    outline: none;
    font-size: 20px;
    text-indent: 10px;
    position: absolute;
    border-radius: 6px;
    right: 1.2rem;
        }
        .footer span {
            /*display: inline-block;
            width: 62px;
            height: 48px;
            background: #ccc;
            font-weight: 900;
            line-height: 45px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 10px;
            border-radius: 6px;*/
            display: inline-block;
    width: 1rem;
    height: .9rem;
    background: #ccc;
    font-weight: 900;
    line-height: .9rem;
    /*cursor: pointer;*/
    font-size: .3rem;
    text-align: center;
    position: absolute;
    right: .2rem;
    border-radius: .12rem;
        }
        .footer span:hover {
            color: #fff;
            background: #999;
        }
        #user_face_icon {
            display: inline-block;
            background: red;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            /*position: absolute;*/
            bottom: 6px;
            left: 14px;
            cursor: pointer;
            overflow: hidden;
        }
        img {
            width: 60px;
            height: 60px;
        }
        .content {
            font-size: 20px;
            width: 100%;
            overflow: auto;
            padding: 5px;
            -webkit-overflow-scrolling: touch;
        }
        .content li {
            margin-top: 10px;
            padding-left: 10px;
            width: 412px;
            display: block;
            clear: both;
            overflow: hidden;
        }
        .content li img {
            float: left;
        }
        .content li span{
            background: #7cfc00;
            padding: 10px;
            border-radius: 10px;
            float: left;
            margin: 6px 10px 0 10px;
            max-width: 310px;
            border: 1px solid #ccc;
            box-shadow: 0 0 3px #ccc;

        }
        .content li img.imgleft { 
            float: left; 
        }
        .content li img.imgright { 
            float: right; 
        }
        .content li span.spanleft { 
            float: left;
            background: #fff;
        }
        .content li span.spanright { 
            float: right;
            background: #7cfc00;
        }
    </style>
    <script>
        window.onload = function(){
            var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
            var num = 0;     //控制头像改变
            var iNow = -1;    //用来累加改变左右浮动
            var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
            var btn = document.getElementById('btn');
            var text = document.getElementById('text');
            var content = document.getElementsByTagName('ul')[0];
            var img = content.getElementsByTagName('img');
            var span = content.getElementsByTagName('span');

            var contentHeight = window.innerHeight - document.getElementsByClassName('header')[0].offsetHeight - document.getElementsByClassName('footer')[0].offsetHeight;
            document.getElementsByClassName('content')[0].style.height = contentHeight+'px';
            

            icon[0].onclick = function(){
                if(num==0){
                    this.src = arrIcon[1];
                    num = 1;
                }else if(num==1){
                    this.src = arrIcon[0];
                    num = 0;
                }                
            }

            text.onfocus = function(){
                content.scrollTop=content.scrollHeight;  

                setInterval(() => {
                    window.scrollTo(0, window.innerHeight + 200);
                }, 1000);
                
            };

            text.oninput = function(){
                //window.scrollTop=content.scrollHeight;  
                window.scrollTop = window.innerHeight+200;
            };

            btn.onclick = function(){
                text.focus();
                if(text.value ==''){
                    alert('不能发送空消息');
                }else {
                    content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
                    iNow++;
                    if(num==0){
                        img[iNow].className += 'imgright';
                        span[iNow].className += 'spanright';
                    }else {
                        img[iNow].className += 'imgleft';
                        span[iNow].className += 'spanleft';
                    }
                    text.value = '';
                    // 内容过多时,将滚动条放置到最底端
                    content.scrollTop=content.scrollHeight;  
                }
            }

            var curHeight = 0;
            content.onscroll = function(){
                console.log(content.scrollTop)
                curHeight = content.scrollHeight;
                if(content.scrollTop ===0) {
                    setTimeout(function(){
                        content.innerHTML = '<li><img src="'+arrIcon[num]+'"><span>'+'我是中国人'+new Date().getTime()+'</span></li>'+'<li><img src="'+arrIcon[num]+'"><span>'+'我是中国人'+new Date().getTime()+'</span></li>'+'<li><img src="'+arrIcon[num]+'"><span>'+'我是中国人'+new Date().getTime()+'</span></li>'+'<li><img src="'+arrIcon[num]+'"><span>'+'我是中国人'+new Date().getTime()+'</span></li>'+content.innerHTML;
                    }, 300)
                    
                    setTimeout(function(){
                        content.scrollTop = content.scrollHeight - curHeight;
                    },1000);
                    
                }
            }
        }

    </script>
</head>
<body>
    <div id="container">
        <div class="header">
            <span style="float: left;">业余草:模拟微信聊天界面</span>
            <span style="float: right;">14:21</span>
        </div>
        <ul class="content">
            <li>下拉加载更多</li>
            <!-- 欢迎加入qq群：454796847、135430763 -->
        </ul>
        <div class="footer">
            <div id="user_face_icon">
                <img src="http://www.xttblog.com/icons/favicon.ico" alt="">
            </div>
            <input id="text" type="text" placeholder="说点什么吧...">
            <span id="btn">发送</span>
        </div>
    </div>
</body>
</html>